<template>
	<view class="customer-service">
		<view class="content">
			<view class="chat-container">
				<scroll-view class="chat-messages" scroll-y>
					<view class="message received">
						<view class="message-time">2023年12月15日 10:30</view>
						<view class="message-content-wrapper">
							<view class="message-avatar">
								<image
									src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
									mode="aspectFill" />
							</view>
							<view class="message-content">
								<view class="message-bubble">
									您好，我是名创优品客服小优，很高兴为您服务，请问有什么可以帮助您的呢？
								</view>
							</view>
						</view>
					</view>

					<view class="message sent">
						<view class="message-time">10:31</view>
						<view class="message-content-wrapper">
							<view class="message-avatar">
								<image
									src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80"
									mode="aspectFill" />
							</view>
							<view class="message-content">
								<view class="message-bubble">
									你好，我想咨询一下我的订单什么时候发货？
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<scroll-view class="quick-questions" scroll-x>
					<view class="quick-question">订单何时发货？</view>
					<view class="quick-question">如何申请退款？</view>
					<view class="quick-question">商品有质量问题</view>
					<view class="quick-question">优惠券使用规则</view>
					<view class="quick-question">会员积分查询</view>
				</scroll-view>

				<view class="chat-input-container">
					<view class="chat-input-actions">
						<uni-icons type="plus" size="20" color="#666" @click="toggleMorePanel"></uni-icons>
					</view>
					<input class="chat-input" placeholder="请输入消息..." />
					<view class="chat-send-btn">发送</view>
				</view>

				<view class="more-panel" v-if="showMorePanel">
					<view class="more-panel-item" @click="handleMoreAction('image')">
						<uni-icons type="image" size="24" color="#666"></uni-icons>
						<text>图片</text>
					</view>
					<view class="more-panel-item" @click="handleMoreAction('product')">
						<uni-icons type="shop" size="24" color="#666"></uni-icons>
						<text>商品</text>
					</view>
					<view class="more-panel-item" @click="handleMoreAction('order')">
						<uni-icons type="list" size="24" color="#666"></uni-icons>
						<text>订单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const showMorePanel = ref(false)

	const toggleMorePanel = () => {
		console.log('toggleMorePanel')
		showMorePanel.value = !showMorePanel.value
	}

	const handleMoreAction = (type) => {
		console.log('选择了:', type)
		showMorePanel.value = false
	}
</script>

<style lang="scss" scoped>
	.customer-service {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

		.chat-container {
			display: flex;
			flex-direction: column;
			height: 100%;
			position: relative;
		}

		.chat-messages {
			flex: 1;
			overflow-y: auto;
		}

		.message {
			margin: 10px 0;
			padding: 0 10px;
		}

		.message-time {
			text-align: center;
			margin-bottom: 10px;
			font-size: 12px;
			color: #999;
		}

		.message-content-wrapper {
			display: flex;
		}

		.message.received .message-content-wrapper {
			justify-content: flex-start;
		}

		.message-avatar {
			width: 40px;
			height: 40px;
			border-radius: 5px;
			overflow: hidden;
			margin-right: 10px;
		}

		.message.sent .message-content-wrapper {
			flex-direction: row-reverse;

			.message-avatar {
				margin-right: 0;
				margin-left: 10px;
			}
		}

		.message-avatar image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.message-content {
			max-width: 70%;
		}

		.message-bubble {
			padding: 10px 15px;
			border-radius: 18px;
			font-size: 14px;
			line-height: 1.4;
			position: relative;
		}

		.message.received .message-bubble {
			background-color: #f5f5f5;
			border-top-left-radius: 0;
		}

		.message.sent .message-bubble {
			background-color: var(--primary-color);
			color: white;
			border-top-right-radius: 0;
		}

		.quick-questions {
			border-radius: 15px 15px 0 0;
			padding: 10px 15px;
			background-color: white;
			border-top: 1px solid var(--border-color);
			overflow-x: auto;
			white-space: nowrap;
		}

		.quick-question {
			display: inline-block;
			padding: 6px 12px;
			background-color: #f5f5f5;
			border-radius: 15px;
			font-size: 13px;
			margin-right: 10px;
			color: var(--text-color);
		}

		.chat-input-container {
			padding: 10px 15px;
			background-color: #fff;
			border-top: 1px solid var(--border-color);
			display: flex;
			align-items: center;
		}

		.chat-input-actions {
			display: flex;
			gap: 15px;
			margin-right: 10px;
			color: #666;
			font-size: 18px;
			cursor: pointer;
		}

		.chat-input {
			flex: 1;
			height: 36px;
			border: 1px solid var(--border-color);
			border-radius: 18px;
			padding: 0 15px;
			font-size: 14px;
			background-color: white;
		}

		.chat-send-btn {
			width: 60px;
			height: 36px;
			background-color: var(--primary-color);
			color: white;
			border-radius: 18px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 10px;
			font-size: 14px;
		}

		.more-panel {
			background-color: #f8f8f8;
			padding: 15px;
			display: flex;
			justify-content: flex-start;
			border-top: 1px solid var(--border-color);

			.more-panel-item {
				margin: 15px;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 5px;

				text {
					font-size: 12px;
					color: #666;
				}
			}
		}
	}
</style>